// 商品选择属性规格弹出框
<template>
  <view>
    <!-- 弹出框 -->
    <u-popup @tap.stop :mask-close-able="true" v-model="show" mode="bottom" closeable>
      <view class="pop-box">
        <scroll-view scroll-y="true" :style="{ height: height + 'rpx' }">
          <view class="top">
            <!-- 主图 -->
            <view class="image-box">
              <view class="left">
                <image :src="goods.goods_image" />
              </view>

              <view class="money">
                <view v-if="price !== '' && goods.unit_data[0].price !== ''"
                  >￥{{ price == '' ? goods.unit_data[0].price : price }}</view
                >
              </view>
            </view>
          </view>
          <!-- 单位 -->
          <view class="pop1">
            <view class="pop1-top">单位</view>
            <view class="pop1-bottom">
              <!--  @tap="chooseUnit(item.price, item.name, index, item.unit)" -->
              <view
                :class="item.is_checked ? 'pop1-checked' : ''"
                class="pop1-item"
                v-for="item in goods.unit_data"
                :key="item.unit"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
          <!-- 属性 -->
          <view class="pop1">
            <view class="pop1-top">属性</view>
            <view class="pop1-bottom">
              <view
                @tap="chooseAttr(item.attr_name, index, item.unit)"
                :class="item.is_checked ? 'pop1-checked' : ''"
                class="pop1-item"
                v-for="(item, index) in goods.attr_data"
                :key="item.id"
              >
                {{ item.attr_name }}
              </view>
            </view>
          </view>
          <!-- 数量 -->
          <view class="pop2">
            <view class="pop2-left">购买数量</view>
            <view class="pop2-right">
              <view @tap="numberDel" class="t-icon t-icon-a--"></view>
              <view class="pop2-number">{{ form.number }}</view>
              <view @tap="numberAdd" class="t-icon t-icon-a-1"></view>
            </view>
          </view>
        </scroll-view>
        <view class="pop3">
          <view @tap="popAddBill"> +加入订货单</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      price: '',
      goosForm: '',
      image: '',
      form: ''
    }
  },

  props: {
    height: {
      type: String,
      default: '1000'
    },
    goods: {
      type: Object
    },
    postForm: {
      type: Object
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.show = newVal
    },
    show(newVal, oldVal) {
      if (!newVal) {
        this.$emit('input', false)
      }
    }
  },

  methods: {
    async popShow() {
      const res = await this.$http.post('/api/kuyou/order/index/goodsGoodsInfo', {
        id: this.goods.id
      })
      if (res.code == 200) {
        console.log('res data', res.data)
        let goodsForm1 = res.data
        this.goodsForm = goodsForm1
        console.log('goodsForm1', goodsForm1)
        console.log('goodsForm', this.goodsForm)
        this.price = this.goodsForm.unit_data[0].price

        //  赋值属性
        this.goodsForm.attr_data.forEach((item) => {
          item.is_checked = false
        })
        // 赋值单位
        this.goodsForm.unit_data.forEach((item) => {
          if (item.is_default == 1) {
            item.is_checked = true
          } else {
            item.is_checked = false
          }
        })
        // 赋值主图
        if (this.goodsForm.goods_image) {
          console.log(1111)
          let image = this.goodsForm.goods_image.startsWith('http')
            ? this.goodsForm.goods_image
            : this.$baseURL + this.goodsForm.goods_image
          this.image = image
        } else {
          this.image = ''
        }
        console.log('修改之后的goodsForm', this.goodsForm)
        this.showPop = true
      }
    }
  }
}
</script>

<style>
</style>
<style lang="less" scoped>
.t-icon-a- {
  width: 44rpx;
  height: 44rpx;
}
.pop-box {
  position: relative;
  width: 100vw;
  overflow: hidden;
  padding-bottom: 100rpx;
  .top {
    width: 694rpx;
    margin: 20rpx auto 0;
    padding-bottom: 36rpx;
    overflow: hidden;

    .image-box {
      overflow: hidden;
      display: flex;
      // justify-content: center;
      align-items: center;
      .left {
        width: 120px;
        height: 120px;
        image {
          width: 120px;
          height: 120px;
        }
      }
      .money {
        display: flex;
        justify-content: center;
        align-items: center;
        view {
          font-size: 36rpx;
          font-weight: 500;
          color: #fe3d23;
        }
      }
    }
  }
  .pop1 {
    border-top: 1px solid #dedede;
    margin: 32rpx auto 0;
    width: 694rpx;

    .pop1-top {
      margin-top: 30rpx;
      font-weight: 500;
      color: #111111;
    }
    .pop1-bottom {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .pop1-item {
        margin-top: 32rpx;
        margin-right: 20rpx;
        padding: 20rpx 20rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        min-width: 96rpx;
        justify-content: center;
        align-items: center;
      }
      .pop1-checked {
        background: #fff5f4;
        border: 2rpx solid #fe3d23;
      }
    }
  }
  .pop2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32rpx auto 0;
    width: 694rpx;
    padding: 20rpx 0;
    border-top: 1px solid #dedede;

    .pop2-left {
    }
    .pop2-right {
      display: flex;
      justify-content: center;
      align-items: center;
      .t-icon {
        width: 60rpx;
        height: 60rpx;
      }
      .pop2-number {
        width: 100rpx;
        height: 60rpx;
        background: #f4f4f4;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;
        margin-right: 12rpx;
      }
    }
  }
  .pop3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    width: 100vw;
    height: 140rpx;
    overflow: hidden;
    view {
      margin: 0 auto;
      margin-top: 20rpx;
      width: 698rpx;
      height: 80rpx;
      background: #fe3d23;
      border-radius: 200rpx;
      font-size: 35rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
